<template>
	<div>
		<input v-model="innerValue" />
		{{ innerValue }}
		<!-- <div class="search_box">
			<el-form
				:inline="true"
				:model="selectData"
				class="demo-form-inline"
			>
				<el-form-item label="标题">
					<el-input
						v-model="selectData.title"
						placeholder="请输入标题"
						clearable
					/>
				</el-form-item>
				<el-form-item label="详情">
					<el-input
						v-model="selectData.introduce"
						placeholder="请输入详情"
						clearable
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSearch">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="dataList.comList" border style="width: 100%">
			<el-table-column prop="id" label="ID" width="180" />
			<el-table-column prop="title" label="标题" width="180" />
			<el-table-column prop="introduce" label="详情" />
		</el-table>
		<div class="example-pagination-block">
			<el-pagination
				layout="total, sizes, prev, pager, next"
				:total="selectData.count"
				@size-change="sizeChange"
				@current-change="currentChange"
			/>
		</div> -->
	</div>
</template>

<script lang="ts" setup>
import {
	defineComponent,
	toRefs,
	ref,
	computed,
	reactive,
	watch,
	onMounted,
	onUnmounted,
	onActivated,
	onDeactivated,
	defineOptions,
} from 'vue'
import { getGoodsList } from '../request/api'
import { initData, ListInt } from '../type/goods'
import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router'

defineOptions({
	name: 'GoodsView',
})

const route = useRoute()
const router = useRouter()

const innerValue = ref(null)
const someData = ref(null)

let needRefresh = ref(true) //判断页面是否需要刷新
// onBeforeRouteLeave((to, from, next) => {
// 	console.log('beforeRouteLeave--goods')

// 	console.log('to-->', to)
// 	console.log('from-->', from)

// 	if (to.name == 'user') {
// 		needRefresh.value = false
// 	} else {
// 		needRefresh.value = true
// 	}
// 	console.log('needRefresh22-->', needRefresh.value)
// 	next()
// })

onMounted(() => {
	console.log('onMounted--goods')
})

onActivated(() => {
	console.log('onActivated--goods')
	console.log('someData.value-->', someData.value)

	if (needRefresh.value) {
		console.log('更新数据')
	}
	if (someData.value) {
		innerValue.value = someData.value
	}
	console.log('innerValue-->', innerValue.value)
})
onDeactivated(() => {
	console.log('onDeactivated--goods')
	someData.value = innerValue.value
	console.log('someData-->', someData.value)
})

onUnmounted(() => {
	console.log('onUnmounted--goods')
})

const jumpUser = () => {
	router.push('/user')
}

// export default defineComponent({
// 	setup() {
// 		const data = reactive(new initData())
// 		const goods = [
// 			{
// 				id: 1,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '牛奶',
// 				userId: 1,
// 			},
// 			{
// 				id: 2,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '咖啡',
// 				userId: 1,
// 			},
// 			{
// 				id: 3,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '奶茶',
// 				userId: 1,
// 			},
// 			{
// 				id: 4,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '棒棒糖',
// 				userId: 1,
// 			},
// 			{
// 				id: 5,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '牛奶',
// 				userId: 1,
// 			},

// 			{
// 				id: 6,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '奶茶',
// 				userId: 1,
// 			},
// 			{
// 				id: 7,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '棒棒糖',
// 				userId: 1,
// 			},
// 			{
// 				id: 8,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '牛奶',
// 				userId: 1,
// 			},
// 			{
// 				id: 9,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '咖啡',
// 				userId: 1,
// 			},
// 			{
// 				id: 10,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '奶茶',
// 				userId: 1,
// 			},
// 			{
// 				id: 11,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '棒棒糖',
// 				userId: 1,
// 			},
// 			{
// 				id: 12,
// 				introduce:
// 					'是否启用 vue-router 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 default-active 来设置加载时的激活项。',
// 				title: '咖啡',
// 				userId: 1,
// 			},
// 		]

// 		const getGoods = () => {
// 			getGoodsList().then((res) => {
// 				console.log('res-->', res)
// 				data.list = res.data
// 				data.selectData.count = res.data.length
// 			})
// 		}

// 		onMounted(() => {
// 			// getGoods()
// 			console.log('onMounted--goods')
// 		})

// 		data.list = goods
// 		data.selectData.count = goods.length

// 		const sourceData = goods

// 		// page=1时，slice(0,10)，return --> 索引0-9的数据
// 		const dataList = reactive({
// 			comList: computed(() => {
// 				return data.list.slice(
// 					(data.selectData.page - 1) * data.selectData.size,
// 					data.selectData.page * data.selectData.size
// 				)
// 			}),
// 		})

// 		const sizeChange = (val: number) => {
// 			data.selectData.size = val
// 		}

// 		const currentChange = (val: number) => {
// 			data.selectData.page = val
// 		}

// 		// 前端根据条件查询
// 		const onSearch = () => {
// 			let arr: ListInt[] = [] // 定义数组，用来接收查询后要展示数据
// 			if (data.selectData.title || data.selectData.introduce) {
// 				if (data.selectData.title) {
// 					arr = data.list.filter((item) => {
// 						return item.title.indexOf(data.selectData.title) !== -1
// 					})
// 				} else if (data.selectData.introduce) {
// 					arr = data.list.filter((item) => {
// 						return (
// 							item.introduce.indexOf(
// 								data.selectData.introduce
// 							) !== -1
// 						)
// 					})
// 				}
// 			} else {
// 				arr = sourceData
// 			}
// 			data.list = arr
// 			data.selectData.count = arr.length
// 		}

// 		// 监听两个属性的变化
// 		watch(
// 			[() => data.selectData.title, () => data.selectData.introduce],
// 			(newVal, oldVal) => {
// 				if (newVal[0] == '' && newVal[1] == '') {
// 					data.list = sourceData
// 				}
// 			}
// 		)

// 		return {
// 			...toRefs(data),
// 			dataList,
// 			sizeChange,
// 			currentChange,
// 			onSearch,
// 			needRefresh,
// 		}
// 	},
// })
</script>

<style scoped></style>
